<template>
	<view class="content">
		<view class="order-state">
			<text class="pre-time">预计送达时间</text>
			<text class="time-show">18:30 - 18.50</text>
			<view class="state">
				<view class="state-item">
					<view class="cycle" :class="{'arriving':state > 0}"></view>
					<text>已下单</text>
				</view>
				<view class="state-item">
					<view class="cycle line" :class="{'arrive':state > 1}"></view>
					<text>制作中</text>
				</view>
				<view class="state-item">
					<view class="cycle line" :class="{'arrive':state > 2}"></view>
					<text>配送中</text>
				</view>
				<view class="state-item">
					<view class="cycle line" :class="{'arrive':state > 3}"></view>
					<text>已送达</text>
				</view>
			</view>
			<view class="segmentation"></view>
			<view class="order-change">
				<view class="change-item">
					<image src="@/static/images/order/orderCancel@2x.png"></image>
					<text>取消订单</text>
				</view>
				<view class="change-item">
					<image src="@/static/images/order/messageCenter@2x.png"></image>
					<text>催单</text>
				</view>
				<view class="change-item">
					<image src="@/static/images/order/contactOnline@2x.png"></image>
					<text>联系商家</text>
				</view>
			</view>
		</view>
		<view class="order-information">
			<view class="store">
				<image class="store-img" src=""></image>
				<text class="store-name">
					{{ orderInformation.store.storeName }}
				</text>
				<!-- 箭头 -->
				<image class="store-arrow" src="@/static/images/my/arrow@2x.png"></image>
			</view>
			<view class="price-list">
				<view class="dish-list bottom-border">
					<view class="dish-item" v-for="item in orderInformation.orderContent" :key="item.id">
						<image class="dish-image" :src="item.dishUrl"></image>
						<view class="desc">
							<text class="dish-name">{{item.dish}}</text>
							<text class="dish-count">{{item.count}}</text>
						</view>
						<text class="dish-fee">${{item.price}}</text>
					</view>
				</view>
				<view class="price bottom-border">
					<view class="take-fee">
						<text class="desc">打包费</text>
						<text class="pay-fee">{{orderInformation.takeFee}}</text>
					</view>
					<view class="sent-fee ">
						<text class="desc">用户配送费</text>
						<text class="pay-fee">${{orderInformation.sentFee}}</text>
					</view>
				</view>
				<view class="discount bottom-border">
					<view class="discount-item" v-for="item in orderInformation.discount" :key="item.discountId">
						<text class="desc">{{item.discountName}}</text>
						<text class="discount-fee">${{item.doscountLimit}}</text>
					</view>
				</view>
				<view class="pay">
					<text class="pay-desc">实付金额</text>
					<text class="pay-sum-fee">${{orderInformation.payFee}}</text>
				</view>

			</view>

		</view>
		<view class="order-props">
			<view class="">
				订单属性信息
				<!-- 获取数据后决定用grid或者flex排列 -->
			</view>
		</view>

	</view>
</template>

<script setup>
	const orderInformation = {
		store: {
			storeName: "cdtu",
			storeImageUrl: ""
		},
		orderContent: [{
				dishId: "001",
				dish: "水煮肉",
				price: "19.88",
				count: "2",
				dishUrl: ""
			},
			{
				dishId: "002",
				dish: "水煮肉",
				price: "19.88",
				count: "2",
				dishUrl: ""
			},
			{
				dishId: "003",
				dish: "水煮肉",
				price: "19.88",
				count: "2",
				dishUrl: ""
			}
		],
		takeFee: "3",
		sentFee: "4",
		discount: "4",
		payFee: "17.88",
		expectationTime: "立即配送",
		sentAddress: "7111",
		enjoyForm: "外卖",
		sentService: "商家自配",
		orderId: "32165584633511535",
		orderTime: "2023-09-12 12:00:13",
		payForm: "在线支付",
		tableware: "1份",
		discount: [{
				discountId: "001",
				discountName: "用户新人立减",
				doscountLimit: "4"
			},
			{
				discountId: "002",
				discountName: "vip",
				doscountLimit: "4"
			}
		]
	}
	const state = 1
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		padding: 32rpx 0;
		gap: 16rpx;

		.order-state {
			background: #ffffff;
			border-radius: 24rpx;
			padding: 40rpx 32rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.pre-time {
				color: #333333;
				font-size: 28rpx;
				font-weight: 500;
			}

			.time-show {
				margin: 8rpx 0 48rpx;
				color: #333333;
				font-size: 40rpx;
				font-weight: 600;
			}

			.state {

				width: 100%;
				display: flex;
				justify-content: space-between;

				.state-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					gap: 8rpx;
				}

				.cycle {
					width: 56rpx;
					height: 56rpx;
					border-radius: 50%;
					background: #E6E6E6;
					position: relative;
					z-index: 9;
				}

				.line::before {
					content: "";
					width: 120rpx;
					height: 8rpx;
					background: #E6E6E6;
					position: absolute;
					top: calc(50% - 4rpx);
					left: -120rpx;
					z-index: -9;
				}
				
				.arrive,.arriving{
					background-image: url("@/static/images/order/finishBingo@2x.png");
					z-index: 999;
					background-size: 56rpx 56rpx;
				}
				
				.arrive::before {
					background: #53BD11;
				}
			}

			.order-change {
				display: flex;
				justify-content: space-between;
				padding: 0 42rpx;
				width: 100%;

				.change-item {
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
					gap: 8rpx;
				}

				image {
					width: 44rpx;
					height: 44rpx;
				}

				text {
					color: #666666;
					font-size: 20rpx;
					font-weight: 400;
				}
			}
		}

		.segmentation {
			width: 100%;
			height: 2rpx;
			background: #E6E6E6;
			margin: 32rpx 0;
		}

		.order-information {
			background: #ffffff;
			border-radius: 24rpx;

			.store {
				height: 80rpx;
				background: #FFD93B;
				position: relative;
				display: flex;
				padding: 0 32rpx;
				border-radius: 24rpx 24rpx 0 0;
				align-items: center;

				.store-img {
					width: 48rpx;
					height: 48rpx;
					margin-right: 8rpx;
				}

				.store-name {
					color: #333333;
					font-size: 28rpx;
					font-weight: 500;
				}

				.store-arrow {
					width: 32rpx;
					height: 32rpx;
					position: absolute;
					right: 32rpx;
				}
			}

			.price-list {
				padding: 32rpx;
				width: 100%;
				position: relative;

				.dish-list {
					width: 100%;
				}

				.dish-item {
					position: relative;
					display: flex;
					align-items: center;

					.dish-image {
						width: 72rpx;
						height: 72rpx;
					}

					.desc {
						display: flex;
						flex-direction: column;
						align-content: space-between;

						.dish-name {
							color: #333333;
							font-size: 24rpx;
							font-weight: 500;
						}

						.dish-count {
							color: #999999;
							font-size: 20rpx;
							font-weight: 400;
						}
					}

					.dish-fee {
						position: absolute;
						right: 0rpx;
						color: #333333;
						font-size: 28rpx;
						font-weight: 600;
					}
				}

				.price,
				.discount,
				.pay {
					margin-top: 32rpx;
					display: flex;
					flex-direction: column;
					row-gap: 16rpx;

					view {
						display: flex;
						justify-content: space-between;
					}

					.desc {
						font-size: 24rpx;
						font-weight: 400;
						color: #000000;
					}

					.pay-fee,
					.discount-fee {
						color: #000000;
						font-weight: 600;
						font-size: 28rpx;
					}


					.discount-fee {
						color: #FF615C;
					}
					
					.pay-desc,.pay-sum-fee{
						color: #000000;
						font-size: 28rpx;
						font-weight: 600;
					}

				}

				.pay {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
				}

			}

			.bottom-border {
				border-bottom: 2rpx solid #E6E6E6;
				width: 100%;
				padding-bottom: 32rpx;
			}
		}

		.order-props {
			background: #ffffff;
			border-radius: 24rpx;
			padding: 32rpx;
		}
	}
</style>